<template>
	<view style="height: 100%;">
		<tt-bar leftIcon="icon-back" title="老带新福利详情" bgColor="#fed407" titleAlign="left" :isShare="isShare">
			<template v-slot:rightCnt>
				<text class="iconfont icon-shoucangdianjia" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toshop"></text>
			</template>
		</tt-bar>
		<view class="meiyou" style="color: #222222;display: flex;justify-content: center;align-items: center;font-size: 40rpx;text-align: center;" v-if="code==2">
			<text>活动已经飞走了... </text>
		</view>
		<view class="content" v-if="code == 0 || code ==1|| code ==3">
			<view class="shopimgbox">
				<image :src="logo" mode=""></image>
			</view>
			<view class="imgbox">
				<image :src="'http://cdn.peixun.de123.com'+xqimg" mode=""></image>
			</view>
			<view class="oldnewbox">
				<view class="oldnewbox1" style="font-size: 30rpx;color: red;font-weight: 700;margin-top: 30rpx;margin-bottom: 10rpx;">
					<text>老带新福利</text>
				</view>
				<view class="oldnewbox2" style="font-size: 24rpx;color:#4e4e4e;">
					<text>{{xqjs}}</text>
				</view>
			</view>
			
		</view>
		<view class="oldnewbtn" v-if="code == 0||code ==1">			
			<button class="oldnewbtn1" @tap="toPage" data-url="myoldnew">
				<text>查看详情</text>
			</button>
		</view>
		<view class="oldnewbtn" v-if="code ==3">
		<button class="oldnewbtn3" @tap="showPoster">
			<text>分享到朋友圈</text>
		</button>
		<button open-type="share" class="oldnewbtn2">
			<text>送给好友</text>
		</button>
		</view>
		<!-- 登录的新组件 -->
		<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
			<newlogin @tap="close"></newlogin>
		</uni-popup>
		<qrcode-poster ref="poster" :title="name.substr(0,12)" :headerImg="'http://cdn.peixun.de123.com'+xqimg"></qrcode-poster>
	</view>
</template>

<script>
	import QrcodePoster from '../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				initInfo: state => state.sys.initInfo,
				parentId: state => state.user.parentId,
				locationCity: state => state.map.locationCity																							
			})
		},
		components: {
			QrcodePoster
		},
		data() {
			return {
				storeId:0,	
				userId:0,
			    actOldAndNewId:0,
				cid:0,
			    name:'',
				xqimg:'',
				xqjs:'',
				logo:'',
				code:0,
				isShare:0
				
			}
		},
		
		watch:{			
			isLogin(newVal){
				setTimeout(()=>{				
					this.apioldnewstudent();
				},500)								
			}			
		},
		methods: {
			
			toshop(){
				
			
				this.toPage(
				{
					url:'shopDetail',
					id:this.storeId
				}
				
				)
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open();
				
			},
			close() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close();
				
			},
			moveHandle(){
				return;
			},
			apiyesoldxiangqing () {				
					this.$store
						.dispatch('apiyesoldxiangqing', {
							storeId:this.storeId,
							userId: this.isLogin?this.userInfo.userId:0
						})
						.then(res => {
							console.log(res);							
							this.name = res.data.oldAndNewWelfarePage.activityOldAndNew.actName							
						});													
			},
			apiyesonlynewxiangqing(){
				this.$store
					.dispatch('apiyesonlynewxiangqing', {
						id:this.actOldAndNewId						
					})
					.then(res => {
						console.log(res.data.oldAndNewWelfarePage);
						this.xqimg = res.data.oldAndNewWelfarePage.img
						this.xqjs  = res.data.oldAndNewWelfarePage.oldAndNewWelfare
						this.logo = res.data.oldAndNewWelfarePage.storeLogo
						
					});
			},
			tongji(){
				this.$store
					.dispatch('apioldsharetongji', {
						storeId:this.storeId						
					})
					.then(res => {
						console.log(res);
						
					});
			},
			oldopen(){
				 //领取老带新福利
					this.$store
						.dispatch('apiOpenold', {
							storeId:this.storeId,
							userId:this.isLogin?this.userInfo.userId:0
						})
						.then(res => {
							console.log(res.data);
							var storeId = this.storeId
							uni.showToast({
								title: res.data.msg,
								icon:  'none',
								success: function() {
									uni.redirectTo({
										url:"../../pagesB/oldfuli/oldfuli?storeId=" + storeId
									})
								}
								
							});
							
						});								
			},
			apioldnewstudent(){
				if(this.isLogin){
					this.$store
						.dispatch('apioldnewstudent', {
							storeId:this.storeId,
							giverId:this.userId,
							actOldAndNewId:this.actOldAndNewId,
							userId:this.userInfo.userId,
							oldCardId:this.cid
						})
						.then(res => {
							this.apiyesonlynewxiangqing();
							console.log('领取新学员福利的接口被调用了！');
							this.code = res.data.code
							if( this.code==1 || this.code ==2){
								uni.showToast({
									title: res.data.msg,
									icon:  'none'								
								});
							}
							
							if(this.code == 3){
								this.apiyesoldxiangqing()
							}
																						
						});
					
				}else{
					this.open();
				}		
			},
			showPoster(){				
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})				
				let _href='';
				_href= this.storeId+'&'+this.userInfo.userId + '&'+this.cid+ '&' +this.actOldAndNewId			
				this.$store.dispatch("apiGetMPToken").then(res=>{
					this.$store.dispatch("apiGetMpCodeImg",{
						token:res.data.data.access_token,
						page:'pages/index/index',
						scene:_href,
						width:280
					}).then(imgRes=>{
						console.log(imgRes)
						if(imgRes.data.code==1){
							this.tongji();
							this.$refs.poster.showCanvas(imgRes.data.data)
						}else{
							
						}
						
					})
				})
			}						
		},
		// 页面分享
		onShareAppMessage(res) {				
			this.tongji();
			return {
				title: '“送你一个优惠福利，快来领取吧！” ' + this.name,
				path: 'pagesB/oldfulifriend/oldfulifriend?storeId=' + this.storeId +'&userId='+this.userInfo.userId + '&cid=' + this.cid + '&actOldAndNewId=' +this.actOldAndNewId + '&isShare=1',
				imageUrl: 'http://cdn.peixun.de123.com'+this.xqimg
				
			};	
		
		},
		created() {
			
				
		},
		onShow() {						
											
		},
		onLoad(data) {
			
			// 自动登录
			// 判断能不能获取到本地存储的'token'		
			if (uni.getStorageSync('token')) {	
				this.$store.dispatch("apiUserAutoLogin", {
					token: uni.getStorageSync('token')
				}).then(res => {
					
					setTimeout(() => {
						this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {
							setTimeout(() => {
								this.$store.dispatch("timEditInfo", {
									nick: res.data.data.nickname,
									role: 2
								})
							}, 400)
						})
						let _data={
								userId:res.data.data.userId,
								city:parseInt(this.locationCity.adcode),
								version:'MP'
							};
						this.$store.dispatch("eidtUserInfo",_data)
					}, 200)
				}).catch(res => {
					 
				})
			}						
			this.isShare = data.isShare ? parseInt(data.isShare) : 0;
			this.storeId = data.storeId;
			this.userId = data.userId;
			this.cid = data.cid
			this.actOldAndNewId = data.actOldAndNewId
			setTimeout(()=>{
				this.apioldnewstudent();
			},500)																																				
		}
	}
</script>

<style lang="less">
	body{
		background-color: #f2f2f2;
	}
	.meiyou{
		width: 100%;
		height: 600rpx;
	}
.content{
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	margin-bottom: 150rpx;
	position: relative;
	// background-color: pink;
	.shopimgbox{
		position: absolute;
		top: 60rpx;
		left: 60rpx;
		text-align: center;
		image{
			border-radius: 7rpx;
			width: 150rpx;
			height: 150rpx;			
		}
	}
	.imgbox{
		width: 100%;
		height: 1332rpx;
		// padding: 0 20rpx;
		// background-color: green;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.oldnewbox{
		// background-color: red;
		width: 100%;
		// height: 190rpx;
	}
	
}
.oldnewbtn{
		// background-color: blue;
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 0 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		.oldnewbtn1{
			width: 600rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #fed308;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #fff;
			
		}
		.oldnewbtn2{
			background-color: #f59423;
			width: 320rpx;
			height: 100rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #fff;
		}
		.oldnewbtn3{
			background-color: #07c160;
			width: 320rpx;
			height: 100rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}
	.icon-shoucangdianjia {
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
</style>
